<template>
	<view class="main">
		<view class="top" v-if="isSearch">
			<uni-search-bar v-model="val" cancelButton="none" @confirm="confirm" class="search"
				:placeholder="$t('index.seachPlaceholder')"></uni-search-bar>
			<text @click.stop="goBack">{{ $t('search.cancel') }}</text>
		</view>
		<uni-nav-bar class="nav" v-else left-icon="left" @clickLeft="goBack">
			<view class="titles">
				<text>

					{{$t('clazz.title')}}
				</text>
			</view>
		</uni-nav-bar>
		<view class="content">
			<course-list :courseList='list'></course-list>
		</view>
	</view>
</template>

<script>
	import courseList from "../../components/courseList/courseList.vue"
	export default {
		data() {
			return {
				isSearch: false,
				val: "",
				page: 1,
				list: [],
				total:0,
				token:""
			}
		},
		components: {
			courseList
		},
		onLoad(Option) {
			this.isSearch = Option.path == "search" ? true : false
			if(this.isSearch){
			this.val = Option.value
			}else{
				this.val = Option.id
			}
			this.token =  JSON.parse(uni.getStorageSync('token')).token
			this.getList()
		},
		onReachBottom() {
			let _self = this
			if(this.total == this.list.length){
				return
			}
			uni.showNavigationBarLoading()
			console.log('reach');
			setTimeout(function() {
				_self.page++;
				_self.getList()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 2
				})
			},
			getList() {

				let params = {
					service: "moodle_mobile_app",
					method: "",
					content: this.val,
					page: this.page,
					ustoken:this.token
				}
				this.isSearch ? params.method = "searchByname" : params.method = "searchBycatgory"
				this.$httpRequest({
					url: "app/api/searchcourse.php",
					method: "POST",
					data: params
				}).then(res => {
					this.list = [...this.list,...res.course]
					this.total  = res.total
				})
			},
			confirm() {
				this.list = []
				let items = JSON.parse(uni.getStorageSync('lists'))
				items.push(this.val)
				uni.setStorageSync('lists', JSON.stringify(items))
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;

		.top {
			margin-top: 104rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search {
				width: 85%;
			}

			text {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #6E7580;
			}
		}

		.nav {
			margin-top: 104rpx;
		}

		.titles {
			width: 100%;
			font-size: 18px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #0F1826;
			height: 100%;
			// line-height: 100%;
			// text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.content {}
	}
</style>
